<script lang="ts" setup>
import { uploadFileAPI } from '@/api/common'
import { useConsultStore } from '@/store/consult'
import type { Picture, PostPatientConsultOrderParams } from '@/types/consult'
import { ref } from 'vue'

// 1. 获取路由参数
const props = defineProps<{ type: string; illnessType: string; depId: string }>()
console.log(props)

// 2. 表单数据
const form = ref<
  Pick<PostPatientConsultOrderParams, 'illnessDesc' | 'illnessTime' | 'consultFlag' | 'pictures'>
>({
  illnessDesc: '',
  illnessTime: 1, //患病时间 1一周内 2一月内 3半年内 4半年以上
  consultFlag: 0, //是否就诊过 0未就诊 1就诊过
  pictures: [],
})

// 3. 患病时间
const illnessTimeList = ref([
  { label: '一周内', value: 1 },
  { label: '一月内', value: 2 },
  { label: '半年内', value: 3 },
  { label: '半年以上', value: 4 },
])

// 4. 是否就诊过
const consultFlagList = ref([
  { label: '就诊过', value: 1 },
  { label: '未就诊', value: 0 },
])

// 5. 上传图片
const handleSelect = async (e: UniHelper.UniFilePickerOnSelectEvent) => {
  const res = await uploadFileAPI(e.tempFilePaths[0])

  form.value.pictures?.push(res)
  console.log(form.value.pictures)
}

// 6. 删除图片
const handleDelete = (e: UniHelper.UniFilePickerOnDeleteEvent) => {
  console.log(e)
  form.value.pictures?.splice(e.index, 1)
}

// 7. 恢复之前填写的病情信息
const store = useConsultStore()

if (store.illnessInfo.illnessDesc.trim()) {
  uni.showModal({
    title: '温馨提示',
    content: '是否恢复之前填写的病情信息？',
    confirmText: '确认',
    confirmColor: '#16C2A3',
    cancelColor: '#848484',
    success(res) {
      if (res.confirm) {
        form.value = store.illnessInfo
      }
    },
  })
}

// 8. 下一步
// 将地址栏的信息赋值给 store.query
store.query = props

const handleNext = () => {
  // 将表单数据赋值给 store.initalValue 持久化存储
  console.log('pictures', form.value.pictures)
  store.illnessInfo = form.value
  uni.navigateTo({
    url: '/subpkg_archive/list/list?type=consult',
  })
}
</script>

<template>
  <scroll-view>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
            v-model="form.illnessDesc"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            v-for="item in illnessTimeList"
            :key="item.value"
            class="tag"
            :class="{ active: form.illnessTime === item.value }"
            @click="form.illnessTime = item.value"
            >{{ item.label }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="item in consultFlagList"
            :key="item.value"
            class="tag"
            :class="{ active: form.consultFlag === item.value }"
            @click="form.consultFlag = item.value"
            >{{ item.label }}</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          :auto-upload="false"
          @select="handleSelect"
          @delete="handleDelete"
          v-model="form.pictures"
        />
      </view>
      {{ form }}
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button :disabled="!form.illnessDesc" class="uni-button" @click="handleNext()">下一步</button>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
